<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyTechBook</title>
        
    <link rel="stylesheet" type="text/css" href="../../static/css/main.css">
</head>
<body>
<div class="navbar navbar-line">
    <div class="container">
        <div class="logo">
            
                MyTechBook
            
        </div>
        <input type="checkbox" id="idoc_nav" />
        <div class="menu_tree">
        <ul><li><a href="../../index.html">首页</a></li><li><a href="#"><span></span>前沿观察</a><ul><li><a href="../../html/前沿观察/ECMAScript 6入门.html">ECMAScript 6入门</a></li><li><a href="../../html/前沿观察/Immutable详解及React中实践.html">Immutable详解及React中实践</a></li><li><a href="../../html/前沿观察/Node.js MVC框架ThinkJS.html">Node.js MVC框架ThinkJS</a></li><li><a href="../../html/前沿观察/Nodejs 5.0.0版本.html">Nodejs 5.0.0版本</a></li><li><a href="../../html/前沿观察/关系型数据库PostgreSQL.html">关系型数据库PostgreSQL</a></li><li><a href="../../html/前沿观察/轻型MVVM框架Vue.js.html">轻型MVVM框架Vue.js</a></li><li><a href="../../html/前沿观察/基于nodejs的开发框架koa.html">基于nodejs的开发框架koa</a></li></ul></li><li><a href="#"><span></span>前端工程化</a><ul><li><a href="../../html/前端工程化/前端模板.html">前端模板</a></li><li><a href="../../html/前端工程化/性能优化和前端工程的爱恨情仇.html">性能优化和前端工程的爱恨情仇</a></li><li><a href="../../html/前端工程化/webpack入门及实践.html">webpack入门及实践</a></li><li class="active"><a href="../../html/前端工程化/前端工程化不完全装逼指南.html">前端工程化不完全装逼指南</a></li></ul></li><li><a href="#"><span></span>性能优化</a><ul><li><a href="../../html/性能优化/jshint代码质量检测.html">jshint代码质量检测</a></li><li><a href="../../html/性能优化/jshint配置说明.html">jshint配置说明</a></li><li><a href="../../html/性能优化/NC性能优化.html">NC性能优化</a></li><li><a href="../../html/性能优化/React编码规范.html">React编码规范</a></li><li><a href="../../html/性能优化/性能优化待办事项.html">性能优化待办事项</a></li><li><a href="../../html/性能优化/性能优化点总结.html">性能优化点总结</a></li></ul></li><li><a href="#"><span></span>技术分享</a><ul><li><a href="../../html/技术分享/React技术分享.html">React技术分享</a></li><li><a href="../../html/技术分享/学习Git.html">学习Git</a></li><li><a href="../../html/技术分享/面向对象.html">面向对象</a></li><li><a href="../../html/技术分享/Node.js知识详解.html">Node.js知识详解</a></li><li><a href="../../html/技术分享/2015年大前端技术年终总结.html">2015年大前端技术年终总结</a></li></ul></li><li><a href="#"><span></span>随想笔记</a><ul><li><a href="../../html/随想笔记/项目技术栈规划.html">项目技术栈规划</a></li><li><a href="../../html/随想笔记/笔试面试大纲.html">笔试面试大纲</a></li></ul></li><li><a href="../../html/CONTACT.html">CONTACT</a></li></ul>    
        </div>
        
        
        <div class="forkgithub"><a target="_blank" href="https://github.com/sujunming">fork on github</a></div>
        

        <section class="idoc_nav_btn">
            <label for="idoc_nav"><span></span></label>
        </section>
    </div>
    
</div>




<div class="container">

    <div class="page-toc">
        <ul><li><a href="#t0前端工程化不完全装逼指南">前端工程化不完全装逼指南</a><ul><li><a href="#t1写在前面">写在前面</a></li><li><a href="#t2前端面临的挑战">前端面临的挑战</a><ul><li><a href="#t31. 技术选型">1. 技术选型</a></li><li><a href="#t42. 项目构建">2. 项目构建</a></li><li><a href="#t53. 模块化开发">3. 模块化开发</a></li><li><a href="#t64. 组件化开发">4. 组件化开发</a></li><li><a href="#t75. 静态资源管理">5. 静态资源管理</a></li></ul></li><li><a href="#t8前端技术元素归纳">前端技术元素归纳</a><ul><li><a href="#t91. 开发规范">1. 开发规范</a></li><li><a href="#t102. 模块化开发">2. 模块化开发</a></li><li><a href="#t113. 组件化开发及组件仓库">3. 组件化开发及组件仓库</a></li><li><a href="#t124. 性能优化">4. 性能优化</a></li><li><a href="#t135. 项目部署">5. 项目部署</a></li><li><a href="#t146. 开发流程">6. 开发流程</a></li><li><a href="#t157. 开发工具">7. 开发工具</a></li></ul></li><li><a href="#t16FIS3的介绍和使用">FIS3的介绍和使用</a></li><li><a href="#t17Jello的实践">Jello的实践</a></li></ul></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h1 id="t0&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5316;&#x4E0D;&#x5B8C;&#x5168;&#x88C5;&#x903C;&#x6307;&#x5357;">&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5316;&#x4E0D;&#x5B8C;&#x5168;&#x88C5;&#x903C;&#x6307;&#x5357; <a href="#t0&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5316;&#x4E0D;&#x5B8C;&#x5168;&#x88C5;&#x903C;&#x6307;&#x5357;"> # </a></h1>
<p>&#x6587;&#x4E2D;&#x90E8;&#x5206;&#x5185;&#x5BB9;&#x53C2;&#x8003;&#x81EA;@fouber&#x548C;@xufei&#xFF0C;&#x5411;&#x524D;&#x8F88;&#x81F4;&#x656C;&#x3002;</p>
<blockquote>
<p>&#x5982;&#x4ECA;&#x5F88;&#x591A;&#x4F01;&#x4E1A;&#x548C;&#x56E2;&#x961F;&#x5C1A;&#x672A;&#x91CD;&#x89C6;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#xFF0C;&#x53C8;&#x6216;&#x662F;&#x8FD9;&#x4E2A;&#x6982;&#x5FF5;&#x5728;&#x5F88;&#x591A;&#x4EBA;&#x773C;&#x91CC;&#x8FD8;&#x53EA;&#x662F;&#x201C;&#x6784;&#x5EFA;&#x5DE5;&#x5177;&#x201D;&#x7684;&#x4EE3;&#x540D;&#x8BCD;&#x3002;</p>
</blockquote>
<h2 id="t1&#x5199;&#x5728;&#x524D;&#x9762;">&#x5199;&#x5728;&#x524D;&#x9762; <a href="#t1&#x5199;&#x5728;&#x524D;&#x9762;"> # </a></h2>
<p><strong>&#x591A;&#x6837;</strong></p>
<p>&#x6253;&#x5F00;&#x624B;&#x673A;&#xFF0C;&#x67E5;&#x770B;&#x4F60;&#x7684;&#x624B;&#x673A;&#x5C4F;&#x5E55;&#xFF0C;&#x4F60;&#x5F88;&#x4E60;&#x60EF;&#x7684;&#x70B9;&#x51FB;&#x6253;&#x5F00;&#x4F60;&#x60F3;&#x7528;&#x7684;APP&#xFF1B;&#x6253;&#x5F00;&#x5FAE;&#x4FE1;&#xFF0C;&#x53BB;&#x6D4F;&#x89C8;&#x4F60;&#x597D;&#x5947;&#x7684;&#x6587;&#x7AE0;&#xFF0C;&#x628A;&#x73A9;&#x4F60;&#x559C;&#x6B22;&#x7684;&#x6E38;&#x620F;&#xFF1B;&#x4F60;&#x6175;&#x61D2;&#x7684;&#x5750;&#x5728;&#x6C99;&#x53D1;&#x4E0A;&#xFF0C;&#x624B;&#x6307;&#x5728;&#x4F60;&#x7B14;&#x8BB0;&#x672C;&#x7684;&#x89E6;&#x6478;&#x5C4F;&#x4E0A;&#x8F7B;&#x8F7B;&#x6ED1;&#x52A8;&#xFF0C;&#x4F60;&#x4E60;&#x60EF;&#x6027;&#x7684;&#x6253;&#x5F00;&#x6DD8;&#x5B9D;&#x4EAC;&#x4E1C;&#x8D2D;&#x7269;&#xFF0C;&#x6216;&#x662F;&#x53BB;&#x6D4F;&#x89C8;&#x65B0;&#x95FB;&#x53BB;&#x704C;&#x6C34;&#x804A;&#x5929;&#x3002;&#x800C;&#x4F60;&#x4E60;&#x60EF;&#x4F7F;&#x7528;&#x7684;&#x8FD9;&#x4E9B;&#x4EA7;&#x54C1;&#xFF0C;&#x90FD;&#x662F;&#x5DE5;&#x7A0B;&#x5E08;&#x4EEC;&#x4E00;&#x884C;&#x884C;&#x4EE3;&#x7801;&#x6572;&#x51FA;&#x6765;&#x7684;&#xFF0C;&#x5728;&#x4F60;&#x4EAB;&#x53D7;&#x4E92;&#x8054;&#x7F51;&#x5E26;&#x6765;&#x7684;&#x4FBF;&#x6377;&#x7684;&#x540C;&#x65F6;&#xFF0C;&#x6211;&#x4EEC;&#x8FD9;&#x7FA4;&#x7801;&#x519C;&#x4E5F;&#x5728;&#x4EAB;&#x53D7;&#x5F00;&#x53D1;&#x5E26;&#x6765;&#x7684;&#x9178;&#x723D;&#x3002;</p>
<p><strong>&#x8FF7;&#x832B;</strong></p>
<p>&#x90A3;&#x4E48;&#xFF0C;&#x65E0;&#x8BBA;&#x662F;&#x4EC0;&#x4E48;&#x6837;&#x7684;&#x4EA7;&#x54C1;&#xFF0C;&#x603B;&#x4F1A;&#x6709;&#x540C;&#x6837;&#x82E6;&#x903C;&#x7684;&#x7A0B;&#x5E8F;&#x733F;&#x540C;&#x5B66;&#x5728;&#x8F9B;&#x82E6;&#x7684;&#x642C;&#x7816;&#x3002;&#x4ED6;&#x4EEC;&#x5728;&#x5199;&#x7740;&#x4E0D;&#x540C;&#x903B;&#x8F91;&#x7684;&#x4EE3;&#x7801;&#xFF0C;&#x53BB;&#x9047;&#x5230;&#x76F8;&#x540C;&#x60C5;&#x51B5;&#x7684;&#x6280;&#x672F;&#x95EE;&#x9898;&#x3002;&#x8D8A;&#x6765;&#x8D8A;&#x590D;&#x6742;&#x7684;web&#x5E94;&#x7528;&#xFF0C;&#x5982;&#x4F55;&#x89C4;&#x5212;&#x597D;&#x903B;&#x8F91;&#x7684;&#x8C03;&#x7528;&#x3001;&#x5982;&#x4F55;&#x7BA1;&#x7406;&#x4E00;&#x5806;&#x7684;CSS&#x4EE3;&#x7801;&#x3001;&#x5982;&#x4F55;&#x7EC4;&#x7EC7;&#x9879;&#x76EE;&#x76EE;&#x5F55;&#x3001;&#x5982;&#x4F55;&#x56E2;&#x961F;&#x534F;&#x4F5C;&#x3001;&#x5982;&#x4F55;&#x4E0A;&#x7EBF;&#x90E8;&#x7F72;&#x3001;&#x5982;&#x4F55;&#x6A21;&#x5757;&#x5316;&#x7684;&#x5B9E;&#x73B0;&#x4EE3;&#x7801;&#x590D;&#x7528;.....</p>
<p><strong>&#x7834;&#x5C40;</strong></p>
<p>&#x5C3D;&#x7BA1;&#x9047;&#x5230;&#x7684;&#x95EE;&#x9898;&#x5F88;&#x591A;&#xFF0C;&#x4F46;&#x662F;&#xFF0C;&#x6709;&#x4EC0;&#x4E48;&#x4E8B;&#x60C5;&#x53EF;&#x4EE5;&#x96BE;&#x4F4F;&#x673A;&#x667A;&#x5982;&#x4F60;&#x7684;&#x5927;&#x8111;&#x3002;&#x89C1;&#x62DB;&#x62C6;&#x62DB;&#xFF0C;&#x4E1C;&#x62FC;&#x897F;&#x51D1;&#xFF0C;&#x5728;&#x5904;&#x7406;&#x95EE;&#x9898;&#x7684;&#x8FC7;&#x7A0B;&#x4E2D;&#x6162;&#x6162;&#x5F62;&#x6210;&#x81EA;&#x5DF1;&#x56E2;&#x961F;&#x7684;&#x65B9;&#x6848;&#x548C;&#x98CE;&#x683C;&#x3002;&#x5982;&#x679C;&#x4F60;&#x662F;&#x4E00;&#x4F4D;&#x6709;&#x7ECF;&#x9A8C;&#x7684;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5E08;&#xFF0C;&#x76F8;&#x4FE1;&#x4F60;&#x4E5F;&#x5728;&#x81EA;&#x5DF1;&#x7684;&#x56E2;&#x961F;&#x91CC;&#x9762;&#x8D70;&#x8FC7;&#x4E86;&#x4E0B;&#x9762;&#x8FD9;&#x4E9B;&#x8DEF;&#x3002;</p>
<h2 id="t2&#x524D;&#x7AEF;&#x9762;&#x4E34;&#x7684;&#x6311;&#x6218;">&#x524D;&#x7AEF;&#x9762;&#x4E34;&#x7684;&#x6311;&#x6218; <a href="#t2&#x524D;&#x7AEF;&#x9762;&#x4E34;&#x7684;&#x6311;&#x6218;"> # </a></h2>
<h3 id="t31. &#x6280;&#x672F;&#x9009;&#x578B;">1. &#x6280;&#x672F;&#x9009;&#x578B; <a href="#t31. &#x6280;&#x672F;&#x9009;&#x578B;"> # </a></h3>
<p>&#x524D;&#x7AEF;&#x6280;&#x672F;&#x9009;&#x578B;&#x53EF;&#x771F;&#x662F;&#x4EF6;&#x6709;&#x8DA3;&#x7684;&#x4E8B;&#x60C5;&#xFF0C;&#x5F62;&#x5F62;&#x8272;&#x8272;&#x7684;&#x7C7B;&#x5E93;&#x548C;&#x6846;&#x67B6;&#x7684;&#x6311;&#x9009;&#xFF0C;&#x7B80;&#x76F4;&#x6BD4;&#x76F8;&#x4EB2;&#x9009;&#x59D1;&#x5A18;&#x8FD8;&#x8BA9;&#x4EBA;&#x7EA0;&#x7ED3;&#x3002;&#x7ECF;&#x5E38;&#x542C;&#x5230;&#x8FD9;&#x6837;&#x7684;&#x58F0;&#x97F3;&#xFF0C;angular&#x597D;&#x8FD8;&#x662F;react&#x597D;&#xFF0C;&#x7528;requirejs&#x5408;&#x9002;&#x8FD8;&#x662F;seajs&#x5408;&#x9002;&#xFF0C;&#x9009;bootstrap&#x597D;&#x770B;&#x8FD8;&#x662F;ionic&#x597D;&#x770B;....&#x6839;&#x636E;&#x7279;&#x5B9A;&#x9879;&#x76EE;&#x7684;&#x7279;&#x5B9A;&#x8FDB;&#x884C;&#x76F8;&#x5E94;&#x7684;&#x6280;&#x672F;&#x9009;&#x578B;&#xFF0C;&#x662F;&#x524D;&#x7AEF;&#x56E2;&#x961F;&#x5FC5;&#x7136;&#x9762;&#x4E34;&#x7684;&#x4E00;&#x4E2A;&#x95EE;&#x9898;&#x3002;</p>
<h3 id="t42. &#x9879;&#x76EE;&#x6784;&#x5EFA;">2. &#x9879;&#x76EE;&#x6784;&#x5EFA; <a href="#t42. &#x9879;&#x76EE;&#x6784;&#x5EFA;"> # </a></h3>
<p>&#x867D;&#x7136;&#x8C08;&#x5230;&#x9879;&#x76EE;&#x6784;&#x5EFA;&#xFF0C;&#x4F46;&#x4F9D;&#x7136;&#x8FD8;&#x662F;&#x5F88;&#x591A;&#x524D;&#x7AEF;&#x540C;&#x5B66;&#x4E0D;&#x77E5;&#x9053;Grunt&#x6216;&#x662F;Gulp&#x4E3A;&#x4F55;&#x7269;&#xFF0C;&#x4ED6;&#x4EEC;&#x4F9D;&#x7136;&#x624B;&#x5199;css&#x3001;html&#x3001;js&#xFF0C;&#x5982;&#x679C;&#x8981;&#x538B;&#x7F29;&#x4EE3;&#x7801;&#xFF0C;&#x5219;&#x767E;&#x5EA6;&#x4E00;&#x4E0B;&#x5728;&#x7EBF;&#x538B;&#x7F29;&#xFF0C;&#x627E;&#x4E2A;&#x5DE5;&#x5177;copy&#x4EE3;&#x7801;&#x538B;&#x7F29;&#x540E;&#x518D;copy&#x56DE;&#x6765;&#xFF0C;&#x5982;&#x679C;&#x8981;&#x52A0;&#x7248;&#x672C;&#x6233;&#xFF0C;&#x5219;&#x5728;&#x6587;&#x4EF6;&#x540E;&#x9762;&#x52A0;&#x4E0A;&#x7C7B;&#x4F3C;<code>?t=2015423432</code>&#x7B49;&#x6807;&#x8BC6;&#xFF0C;&#x5982;&#x679C;&#x9700;&#x8981;&#x5F02;&#x6784;less&#x6216;sass&#xFF0C;&#x4ED6;&#x4EEC;&#x4F9D;&#x7136;&#x4F1A;&#x53BB;&#x627E;&#x4E2A;&#x5176;&#x4ED6;&#x72EC;&#x7ACB;&#x7684;&#x5DE5;&#x5177;&#x6765;&#x505A;&#x8FD9;&#x4E2A;&#x4E8B;&#x60C5;&#x3002;&#x6CA1;&#x9519;&#xFF0C;&#x4F9D;&#x7136;&#x4F1A;&#x6709;&#x5F88;&#x591A;&#x7684;&#x524D;&#x7AEF;&#x56E2;&#x961F;&#x5728;&#x5982;&#x6B64;&#x5DE5;&#x7A0B;&#x5316;&#x7A0B;&#x5EA6;&#x4F4E;&#x7684;&#x73AF;&#x5883;&#x5DE5;&#x5177;&#xFF0C;&#x4E5F;&#x8BB8;&#x8DDF;&#x516C;&#x53F8;&#x7684;&#x6280;&#x672F;&#x6C1B;&#x56F4;&#x6709;&#x5173;&#x5427;&#x3002;&#x4F46;&#x81F3;&#x5C11;&#x73B0;&#x5728;&#xFF0C;&#x5E02;&#x9762;&#x4E0A;&#x6709;&#x5F88;&#x4F18;&#x79C0;&#x7684;&#x6784;&#x5EFA;&#x5DE5;&#x5177;&#x6765;&#x5E2E;&#x6211;&#x4EEC;&#x505A;&#x8FD9;&#x4E9B;&#x4E8B;&#x60C5;&#xFF0C;&#x6BD4;&#x5982;grunt&#x3001;gulp&#x3001;webpack&#x3001;fis&#x3001;jdf&#x3001;coolie&#x7B49;&#x7B49;&#xFF0C;&#x7528;&#x5B83;&#x4EEC;&#x6765;&#x505A;&#x4EE3;&#x7801;&#x7684;&#x89E3;&#x6790;&#x3001;&#x538B;&#x7F29;&#x3001;&#x6821;&#x9A8C;&#x3001;&#x5408;&#x5E76;&#x6253;&#x5305;&#x7B49;&#x81EA;&#x52A8;&#x5316;&#x5DE5;&#x4F5C;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5F88;&#x8F7B;&#x6613;&#x7684;&#x57FA;&#x4E8E;&#x8FD9;&#x4E9B;&#x5DE5;&#x5177;&#x53BB;&#x642D;&#x5EFA;&#x4E00;&#x5957;&#x6211;&#x4EEC;&#x7684;&#x524D;&#x7AEF;&#x5DE5;&#x4F5C;&#x6D41;&#x3002;&#x4F46;&#x8FD9;&#x53EA;&#x662F;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5316;&#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF0C;&#x6211;&#x4EEC;&#x7684;&#x8DEF;&#x8FD8;&#x5F88;&#x957F;&#x3002;</p>
<h3 id="t53. &#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1;">3. &#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1; <a href="#t53. &#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1;"> # </a></h3>
<p>&#x8BE5;&#x548C;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x51E0;&#x5343;&#x51E0;&#x4E07;&#x884C;&#x4EE3;&#x7801;&#x7684;&#x65F6;&#x4EE3;&#x8BF4;&#x518D;&#x89C1;&#x4E86;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x6A21;&#x5757;&#x5316;&#x7684;&#x5F00;&#x53D1;&#x3002;&#x65E2;&#x7136;web&#x5E94;&#x7528;&#x5F88;&#x590D;&#x6742;&#xFF0C;&#x90A3;&#x6211;&#x4EEC;&#x5C31;&#x5E94;&#x5F53;&#x5C06;&#x590D;&#x6742;&#x7684;&#x4E8B;&#x60C5;&#x7B80;&#x5355;&#x5316;&#xFF0C;&#x4ECE;&#x7EB7;&#x4E71;&#x7684;&#x903B;&#x8F91;&#x4E2D;&#x62BD;&#x4E1D;&#x5265;&#x8327;&#x822C;&#x627E;&#x5230;&#x6E05;&#x6670;&#x7684;&#x903B;&#x8F91;&#x89C4;&#x5212;&#xFF0C;&#x5206;&#x800C;&#x6CBB;&#x4E4B;&#x7684;&#x6A21;&#x5757;&#x5316;&#x601D;&#x60F3;&#xFF0C;&#x662F;&#x5F00;&#x53D1;&#x548C;&#x7EF4;&#x62A4;&#x590D;&#x6742;&#x5E94;&#x7528;&#x7684;&#x57FA;&#x77F3;&#x3002;&#x8FD9;&#x91CC;&#x63D0;&#x5230;&#x7684;&#x6A21;&#x5757;&#x5316;&#x5305;&#x62EC;JS&#x6A21;&#x5757;&#x5316;&#x548C;CSS&#x7684;&#x6A21;&#x5757;&#x5316;&#xFF0C;&#x800C;&#x5176;&#x4E2D;&#x7684;&#x65B9;&#x6848;&#x76F8;&#x6BD4;&#x5927;&#x5BB6;&#x90FD;&#x6BD4;&#x8F83;&#x719F;&#x77E5;&#x4E86;&#x3002;&#x5982;&#xFF0C;JS&#x6A21;&#x5757;&#x5316;&#x65B9;&#x6848;&#x5C31;&#x6709;AMD/CommonJS/UMD/ES6 Modlue&#x7B49;&#xFF0C;&#x4E0E;&#x6A21;&#x5757;&#x65B9;&#x6848;&#x5BF9;&#x5E94;&#x7684;&#x6846;&#x67B6;&#x548C;&#x5DE5;&#x5177;&#x4E5F;&#x5F88;&#x591A;&#xFF1B;CSS&#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1;&#x57FA;&#x672C;&#x90FD;&#x662F;&#x901A;&#x8FC7;less&#x3001;sass&#x3001;stylus&#x7B49;&#x9884;&#x5904;&#x7406;&#x5668;&#x6765;&#x5B9E;&#x73B0;&#x7684;&#x3002;&#x5B9E;&#x73B0;&#x4E86;&#x6A21;&#x5757;&#x5316;&#x7684;&#x5F00;&#x53D1;&#xFF0C;&#x5BF9;&#x4E8E;&#x56E2;&#x961F;&#x800C;&#x8A00;&#xFF0C;&#x706B;&#x529B;&#x5DF2;&#x4E0A;&#x5347;&#x4E00;&#x4E2A;&#x6570;&#x91CF;&#x7EA7;&#xFF0C;&#x81F3;&#x5C11;&#x4E0D;&#x7528;&#x518D;&#x4E3A;&#x4EE5;&#x524D;&#x7684;&#x4F4E;&#x6548;&#x5F00;&#x53D1;&#x65B9;&#x5F0F;&#x6101;&#x82E6;&#x3002;</p>
<hr>
<p>&#x867D;&#x7136;&#x5386;&#x7ECF;&#x4E86;&#x78E8;&#x96BE;&#xFF0C;&#x6211;&#x4EEC;&#x7684;&#x524D;&#x7AEF;&#x56E2;&#x961F;&#x7ECF;&#x5386;&#x4EE5;&#x4E0A;&#x51E0;&#x6B65;&#x7684;&#x6D17;&#x793C;&#xFF0C;&#x5DF2;&#x7136;&#x80FD;&#x591F;cover&#x4F4F;&#x516C;&#x53F8;&#x590D;&#x6742;&#x4E1A;&#x52A1;&#x7684;&#x9700;&#x6C42;&#xFF0C;&#x4F46;&#x662F;&#xFF0C;&#x7801;&#x519C;&#x7684;&#x4E16;&#x754C;&#x5E76;&#x672A;&#x5C31;&#x6B64;&#x6E05;&#x51C0;&#xFF0C;&#x5426;&#x5219;&#xFF0C;&#x5BC2;&#x9759;&#x7684;&#x6DF1;&#x591C;&#x4E5F;&#x4E0D;&#x4F1A;&#x6709;&#x90A3;&#x4E48;&#x591A;&#x95EA;&#x95EA;&#x5C4F;&#x5E55;&#x524D;&#x6781;&#x901F;&#x6572;&#x51FB;&#x7684;&#x952E;&#x76D8;&#x58F0;&#x54CD;&#x3002;&#x81EA;&#x52A8;&#x5316;&#x9879;&#x76EE;&#x6784;&#x5EFA;&#x3001;&#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1;&#x4EE5;&#x53CA;&#x5408;&#x7406;&#x7684;&#x6280;&#x672F;&#x9009;&#x578B;&#x53EF;&#x4EE5;&#x6EE1;&#x8DB3;&#x57FA;&#x672C;&#x4E1A;&#x52A1;&#x5F00;&#x53D1;&#xFF0C;&#x4F46;&#x524D;&#x7AEF;&#x9762;&#x4E34;&#x7684;&#x5DE5;&#x7A0B;&#x95EE;&#x9898;&#x4F9D;&#x7136;&#x8FD8;&#x5F88;&#x4E25;&#x5CFB;&#xFF1A;</p>
<ul>
<li>&#x5982;&#x4F55;&#x8FDB;&#x884C;&#x591A;&#x56E2;&#x961F;&#x8DE8;&#x90E8;&#x95E8;&#x7684;&#x8FDB;&#x884C;&#x5927;&#x89C4;&#x6A21;&#x5F00;&#x53D1;&#xFF0C;&#x5982;&#x4F55;&#x7EDF;&#x4E00;&#x5F00;&#x53D1;&#x89C4;&#x8303;</li>
<li>&#x6784;&#x5EFA;&#x9AD8;&#x6027;&#x80FD;&#x7684;web&#x5E94;&#x7528;&#xFF0C;&#x6211;&#x4EEC;&#x8FD8;&#x6709;&#x5F88;&#x591A;&#x4E8B;&#x60C5;&#x8981;&#x505A;&#xFF1A;<ul>
<li>CDN&#x90E8;&#x7F72;</li>
<li>&#x7F13;&#x5B58;&#x63A7;&#x5236;&#x4E0E;&#x590D;&#x7528;</li>
<li>&#x6587;&#x4EF6;&#x6307;&#x7EB9;</li>
<li>&#x6309;&#x9700;&#x52A0;&#x8F7D;&#x3001;&#x540C;&#x6B65;/&#x5F02;&#x6B65;&#x52A0;&#x8F7D;</li>
<li>&#x5408;&#x5E76;&#x8BF7;&#x6C42;</li>
<li>....</li>
</ul>
</li>
</ul>
<hr>
<p>&#x8981;&#x505A;&#x5230;&#x5927;&#x5E45;&#x63D0;&#x5347;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x6548;&#x7387;&#xFF0C;&#x5E76;&#x4E14;&#x517C;&#x987E;web&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF0C;&#x90A3;&#x4E48;&#x9996;&#x5148;&#x9700;&#x8981;&#x8003;&#x8651;&#x597D;&#x7EC4;&#x4EF6;&#x5316;&#x5F00;&#x53D1;&#x548C;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x7BA1;&#x7406;&#x4E24;&#x5927;&#x58C1;&#x5792;&#x7684;&#x653B;&#x7834;&#xFF0C;&#x5F88;&#x663E;&#x7136;&#xFF0C;&#x8FD9;&#x5DF2;&#x975E;&#x96BE;&#x4E8B;&#x3002;</p>
<h3 id="t64. &#x7EC4;&#x4EF6;&#x5316;&#x5F00;&#x53D1;">4. &#x7EC4;&#x4EF6;&#x5316;&#x5F00;&#x53D1; <a href="#t64. &#x7EC4;&#x4EF6;&#x5316;&#x5F00;&#x53D1;"> # </a></h3>
<p>&#x5728;&#x8FD9;React&#x71E5;&#x70ED;&#x7684;&#x5E74;&#x4EE3;&#xFF0C;&#x76F8;&#x4FE1;&#x4F60;&#x5BF9;&#x7EC4;&#x4EF6;&#x5316;&#x7684;&#x8BF4;&#x6CD5;&#x65E9;&#x5DF2;&#x662F;&#x8033;&#x719F;&#x80FD;&#x8BE6;&#x4E86;&#x3002;&#x7EC4;&#x4EF6;&#x7684;&#x6982;&#x5FF5;&#x867D;&#x5F88;&#x666E;&#x904D;&#xFF0C;&#x4F46;&#x662F;&#x5927;&#x5BB6;&#x5BF9;&#x7EC4;&#x4EF6;&#x7684;&#x7406;&#x89E3;&#x5374;&#x5404;&#x6709;&#x4E0D;&#x540C;&#xFF0C;&#x800C;&#x8FD9;&#x91CC;&#x8BF4;&#x7684;&#x7EC4;&#x4EF6;&#x6307;UI&#x7EC4;&#x4EF6;&#x3002;&#x5B9E;&#x73B0;&#x7EC4;&#x4EF6;&#x5316;&#x76EE;&#x524D;&#x4E5F;&#x6709;&#x5F88;&#x591A;&#x65B9;&#x6848;&#x4E86;&#xFF0C;&#x5728;@fufei&#x7684;<a href="https://github.com/xufei/blog/issues/19">&#x6DF1;&#x5EA6;&#x535A;&#x6587;</a>&#x4E2D;&#x63D0;&#x5230;&#x4E86;&#x5BF9;&#x7EC4;&#x4EF6;&#x5316;&#x6846;&#x67B6;&#x7684;&#x89E3;&#x8BFB;&#x3002;&#x540C;&#x65F6;&#xFF0C;@fouber&#x5BF9;&#x7EC4;&#x4EF6;&#x5316;&#x7406;&#x5FF5;&#x7684;&#x89E3;&#x8BFB;&#x6211;&#x4E5F;&#x6BD4;&#x8F83;&#x8D5E;&#x540C;&#xFF1A;</p>
<ul>
<li>&#x9875;&#x9762;&#x7684;&#x6BCF;&#x4E2A;&#x72EC;&#x7ACB;&#x53EF;&#x89C6;&#x533A;&#x57DF;&#x90FD;&#x53EF;&#x4E3A;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;</li>
<li>&#x6BCF;&#x4E2A;&#x7EC4;&#x4EF6;&#x5BF9;&#x5E94;&#x72EC;&#x7ACB;&#x76EE;&#x5F55;&#xFF0C;&#x7EC4;&#x4EF6;&#x8D44;&#x6E90;&#x5C31;&#x8FD1;&#x7EF4;&#x62A4;</li>
<li>&#x7EC4;&#x4EF6;&#x53EF;&#x81EA;&#x7531;&#x7EC4;&#x5408;&#xFF0C;&#x9875;&#x9762;&#x7EC4;&#x4EF6;&#x53EF;&#x81EA;&#x7531;&#x5220;&#x66FF;
&#x8FD9;&#x4E5F;&#x662F;React&#x5BF9;&#x7EC4;&#x4EF6;&#x7684;&#x5B9A;&#x4E49;&#x3002;&#x5BF9;&#x5E94;&#x7684;&#xFF0C;&#x7EC4;&#x4EF6;&#x5316;&#x5B9E;&#x73B0;&#x7684;&#x65B9;&#x6848;&#x4E5F;&#x6BD4;&#x8F83;&#x4E30;&#x5BCC;&#xFF1A;</li>
<li>&#x901A;&#x8FC7;&#x6269;&#x5C55;&#x6A21;&#x677F;&#x8BED;&#x6CD5;&#x53CA;&#x7ED3;&#x5408;&#x5DE5;&#x5177;&#x6846;&#x67B6;&#x5B9E;&#x73B0;&#x8D44;&#x6E90;&#x91CD;&#x7EC4;&#x7684;&#x7EC4;&#x4EF6;&#x5316;&#x65B9;&#x6848;</li>
<li>React&#x7ED3;&#x5408;JSX&#x8BED;&#x6CD5;&#x7684;&#x7EC4;&#x4EF6;&#x5316;&#x65B9;&#x6848;</li>
<li>Polymer &amp;&amp; Web Components&#x65B9;&#x6848;</li>
<li>Angular</li>
<li>Vuejs
&#x5BF9;&#x4E8E;&#x7EC4;&#x4EF6;&#x5316;&#x7684;&#x5B9E;&#x8DF5;&#xFF0C;&#x7F8E;&#x56E2;&#x70B9;&#x8BC4;&#x7684;<a href="http://tech.meituan.com/frontend-component-practice.html">&#x524D;&#x7AEF;&#x7EC4;&#x4EF6;&#x5316;&#x5F00;&#x53D1;&#x5B9E;&#x8DF5;</a>&#x8FD9;&#x7BC7;&#x6587;&#x7AE0;&#x8BB2;&#x7684;&#x5F88;&#x4E0D;&#x9519;&#x3002;</li>
</ul>
<h3 id="t75. &#x9759;&#x6001;&#x8D44;&#x6E90;&#x7BA1;&#x7406;">5. &#x9759;&#x6001;&#x8D44;&#x6E90;&#x7BA1;&#x7406; <a href="#t75. &#x9759;&#x6001;&#x8D44;&#x6E90;&#x7BA1;&#x7406;"> # </a></h3>
<p>&#x5BF9;&#x4E8E;&#x524D;&#x7AEF;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x7684;&#x7BA1;&#x7406;&#xFF0C;&#x81EA;&#x7B2C;&#x4E00;&#x70B9;&#x8D77;&#x6211;&#x4EEC;&#x5C31;&#x9700;&#x8981;&#x9762;&#x4E34;&#xFF0C;&#x65E0;&#x8BBA;&#x4F60;&#x7684;&#x9879;&#x76EE;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x5316;&#x7A0B;&#x5EA6;&#x5982;&#x4F55;&#xFF0C;&#x65E0;&#x8BBA;&#x524D;&#x7AEF;&#x6280;&#x672F;&#x5982;&#x4F55;&#x7684;&#x6F14;&#x53D8;&#xFF0C;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x589E;&#x91CF;&#x52A0;&#x8F7D;&#x65B9;&#x6848;&#x7684;&#x63A2;&#x7D22;&#x90FD;&#x5C06;&#x662F;&#x91CD;&#x4E2D;&#x4E4B;&#x91CD;&#xFF0C;&#x662F;&#x68C0;&#x9A8C;&#x57FA;&#x7840;&#x67B6;&#x6784;&#x4F18;&#x52A3;&#x7684;&#x8BD5;&#x91D1;&#x77F3;&#x3002;</p>
<p>&#x8D44;&#x6E90;&#x7BA1;&#x7406;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x8BF4;&#x5BB9;&#x6613;&#x4E5F;&#x5BB9;&#x6613;&#xFF0C;&#x628A;html&#x3001;js&#x3001;css&#x3001;images&#x7B49;&#x8D44;&#x6E90;&#x5F80;&#x670D;&#x52A1;&#x5668;&#x4E0A;&#x4E00;&#x6254;&#xFF0C;&#x7528;&#x6237;&#x53EF;&#x4EE5;&#x6B63;&#x5E38;&#x8BBF;&#x95EE;&#x9875;&#x9762;&#xFF0C;&#x5B8C;&#x7F8E;&#xFF0C;&#x6536;&#x5DE5;&#x56DE;&#x5BB6;&#x7761;&#x89C9;&#x3002;&#x4F46;&#x8BF4;&#x590D;&#x6742;&#x4E5F;&#x590D;&#x6742;&#xFF0C;&#x6BD4;&#x5982;&#x8BF4;FB&#x7F51;&#x7AD9;&#x7684;&#x5EFA;&#x8BBE;&#xFF0C;&#x6574;&#x7AD9;&#x4E00;&#x4E07;&#x591A;&#x4E2A;&#x9759;&#x6001;&#x8D44;&#x6E90;&#xFF0C;&#x6BCF;&#x4E2A;&#x8D44;&#x6E90;&#x7FFB;&#x8BD1;&#x6210;100&#x79CD;&#x8BED;&#x8A00;&#xFF0C;&#x5149;&#x8FD9;&#x90FD;&#x8DB3;&#x591F;&#x8BA9;&#x4F60;&#x7761;&#x4E0D;&#x7740;&#x89C9;&#x4E86;...</p>
<p>&#x800C;&#x767E;&#x5EA6;FIS&#x56E2;&#x961F;&#x901A;&#x8FC7;&#x5BF9;FB&#x7CFB;&#x7EDF;&#x5206;&#x6790;&#x5F97;&#x51FA;&#x7684;&#x8D44;&#x6E90;&#x7BA1;&#x7406;&#x7684;&#x542F;&#x793A;&#x8BA9;&#x4EBA;&#x5370;&#x8C61;&#x6DF1;&#x523B;&#xFF1A;</p>
<blockquote>
<p>&#x9759;&#x6001;&#x8D44;&#x6E90;&#x7BA1;&#x7406;&#x7CFB;&#x7EDF; = &#x8D44;&#x6E90;&#x8868; + &#x8D44;&#x6E90;&#x52A0;&#x8F7D;&#x6846;&#x67B6;</p>
</blockquote>
<p>&#x57FA;&#x4E8E;&#x6B64;&#x518D;&#x5BF9;&#x5E94;&#x7684;&#x601D;&#x8003;&#x5B9E;&#x8DF5;&#xFF1A;</p>
<blockquote>
<p>&#x4E00;&#x4E2A;&#x901A;&#x7528;&#x7684;&#x8D44;&#x6E90;&#x8868;&#x751F;&#x6210;&#x5DE5;&#x5177; + &#x57FA;&#x4E8E;&#x8868;&#x7684;&#x8D44;&#x6E90;&#x52A0;&#x8F7D;&#x6846;&#x67B6;</p>
</blockquote>
<p>&#x57FA;&#x4E8E;&#x5DE5;&#x5177;&#x548C;&#x6846;&#x67B6;&#x7684;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x65B9;&#x6848;&#xFF1A;</p>
<blockquote>
<ul>
<li>&#x52A0;&#x8F7D;&#x76F8;&#x5173;&#x7684;&#x6309;&#x9700;&#x52A0;&#x8F7D;&#x3001;&#x5EF6;&#x8FDF;&#x52A0;&#x8F7D;&#x3001;&#x9884;&#x52A0;&#x8F7D;&#x3001;&#x8BF7;&#x6C42;&#x5408;&#x5E76;&#x7B49;&#x7B56;&#x7565;&#xFF1B;</li>
<li>&#x6709;&#x7F13;&#x5B58;&#x76F8;&#x5173;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x7F13;&#x5B58;&#x5229;&#x7528;&#xFF0C;&#x7F13;&#x5B58;&#x66F4;&#x65B0;&#x3001;&#x7F13;&#x5B58;&#x5171;&#x4EAB;&#x3001;&#x975E;&#x8986;&#x76D6;&#x5F0F;&#x53D1;&#x5E03;&#x7B49;&#x65B9;&#x6848;&#xFF1B;</li>
<li>BigRender&#x3001;BigPipe&#x3001;Quickling&#x3001;PageCache&#x7B49;&#x6280;&#x672F;</li>
</ul>
</blockquote>
<h2 id="t8&#x524D;&#x7AEF;&#x6280;&#x672F;&#x5143;&#x7D20;&#x5F52;&#x7EB3;">&#x524D;&#x7AEF;&#x6280;&#x672F;&#x5143;&#x7D20;&#x5F52;&#x7EB3; <a href="#t8&#x524D;&#x7AEF;&#x6280;&#x672F;&#x5143;&#x7D20;&#x5F52;&#x7EB3;"> # </a></h2>
<blockquote>
<p>&#x5982;&#x679C;&#x6211;&#x8DDF;&#x4F60;&#x8BF4;&#xFF0C;&#x4EE5;&#x4E0A;&#x7684;&#x5185;&#x5BB9;&#x90FD;&#x662F;&#x94FA;&#x57AB;&#xFF0C;&#x73B0;&#x5728;&#x624D;&#x521A;&#x521A;&#x6696;&#x573A;&#xFF0C;&#x4F60;&#x4F1A;&#x4E0D;&#x4F1A;&#x62FF;&#x677F;&#x7816;&#x62CD;&#x6211;&#xFF0C;&#x54C8;&#x54C8;&#x3002;</p>
</blockquote>
<p>&#x5176;&#x5B9E;&#xFF0C;&#x4ECE;&#x4EE5;&#x4E0A;&#x7684;&#x5206;&#x6790;&#x7ED3;&#x5408;&#x524D;&#x7AEF;&#x8FD9;&#x4E9B;&#x5E74;&#x7684;&#x53D1;&#x5C55;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5F52;&#x7EB3;&#x51FA;&#xFF0C;&#x4E00;&#x4E2A;web&#x524D;&#x7AEF;&#x56E2;&#x961F;&#x5927;&#x6982;&#x4F1A;&#x9047;&#x5230;&#x7684;&#x6280;&#x672F;&#x5143;&#x7D20;&#xFF1A;</p>
<h3 id="t91. &#x5F00;&#x53D1;&#x89C4;&#x8303;">1. &#x5F00;&#x53D1;&#x89C4;&#x8303; <a href="#t91. &#x5F00;&#x53D1;&#x89C4;&#x8303;"> # </a></h3>
<p>&#x8FD9;&#x91CC;&#x7684;&#x5F00;&#x53D1;&#x89C4;&#x8303;&#x5305;&#x62EC;&#x5F00;&#x53D1;&#x3001;&#x90E8;&#x7F72;&#x7684;&#x76EE;&#x5F55;&#x89C4;&#x8303;&#xFF0C;&#x7F16;&#x7801;&#x89C4;&#x8303;&#x7B49;&#xFF0C;&#x56E2;&#x961F;&#x5408;&#x7406;&#x7684;&#x89C4;&#x8303;&#x53EF;&#x4EE5;&#x6781;&#x5927;&#x7684;&#x63D0;&#x5347;&#x5F00;&#x53D1;&#x6548;&#x7387;&#xFF0C;&#x5E2E;&#x52A9;&#x4ED6;&#x4EEC;&#x5FEB;&#x901F;&#x5B9A;&#x4F4D;&#x95EE;&#x9898;&#x3002;</p>
<h3 id="t102. &#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1;">2. &#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1; <a href="#t102. &#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1;"> # </a></h3>
<p>&#x9488;&#x5BF9;js&#x3001;css&#xFF0C;&#x4EE5;&#x529F;&#x80FD;&#x6216;&#x4E1A;&#x52A1;&#x4E3A;&#x5355;&#x5143;&#x7EC4;&#x7EC7;&#x4EE3;&#x7801;&#x3002;js&#x65B9;&#x9762;&#x89E3;&#x51B3;&#x72EC;&#x7ACB;&#x4F5C;&#x7528;&#x57DF;&#x3001;&#x4F9D;&#x8D56;&#x7BA1;&#x7406;&#x3001;api&#x66B4;&#x9732;&#x3001;&#x6309;&#x9700;&#x52A0;&#x8F7D;&#x4E0E;&#x6267;&#x884C;&#x3001;&#x5B89;&#x5168;&#x5408;&#x5E76;&#x7B49;&#x95EE;&#x9898;&#xFF0C;css&#x65B9;&#x9762;&#x89E3;&#x51B3;&#x4F9D;&#x8D56;&#x7BA1;&#x7406;&#x3001;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x6837;&#x5F0F;&#x7BA1;&#x7406;&#x7B49;&#x95EE;&#x9898;&#x3002;&#x662F;&#x63D0;&#x5347;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x6548;&#x7387;&#x7684;&#x91CD;&#x8981;&#x57FA;&#x7840;&#x3002;&#x73B0;&#x5728;&#x6D41;&#x884C;&#x7684;&#x6A21;&#x5757;&#x5316;&#x6846;&#x67B6;&#x6709;requirejs&#x3001;seajs&#x7B49;&#x3002;</p>
<h3 id="t113. &#x7EC4;&#x4EF6;&#x5316;&#x5F00;&#x53D1;&#x53CA;&#x7EC4;&#x4EF6;&#x4ED3;&#x5E93;">3. &#x7EC4;&#x4EF6;&#x5316;&#x5F00;&#x53D1;&#x53CA;&#x7EC4;&#x4EF6;&#x4ED3;&#x5E93; <a href="#t113. &#x7EC4;&#x4EF6;&#x5316;&#x5F00;&#x53D1;&#x53CA;&#x7EC4;&#x4EF6;&#x4ED3;&#x5E93;"> # </a></h3>
<p>&#x5728;&#x6A21;&#x5757;&#x5316;&#x57FA;&#x7840;&#x4E0A;&#xFF0C;&#x7EC4;&#x4EF6;&#x5355;&#x5143;&#x7684;&#x8D44;&#x6E90;&#x5C31;&#x8FD1;&#x5F00;&#x53D1;&#x7EF4;&#x62A4;&#xFF0C;&#x7EC4;&#x4EF6;&#x4E5F;&#x9700;&#x8981;&#x5206;&#x4E3A;&#x901A;&#x7528;&#x7EC4;&#x4EF6;&#x3001;&#x4E1A;&#x52A1;&#x7EC4;&#x4EF6;&#x3001;&#x516C;&#x5171;&#x7EC4;&#x4EF6;&#xFF0C;&#x65B9;&#x4FBF;&#x6700;&#x5927;&#x9650;&#x5EA6;&#x5730;&#x7EC4;&#x4EF6;&#x7BA1;&#x7406;&#xFF0C;&#x5C06;&#x4E00;&#x4E9B;&#x975E;&#x5E38;&#x901A;&#x7528;&#x7684;&#x7EC4;&#x4EF6;&#x653E;&#x5230;&#x4E00;&#x4E2A;&#x516C;&#x5171;&#x7684;&#x5730;&#x65B9;&#x4F9B;&#x56E2;&#x961F;&#x5171;&#x4EAB;&#xFF0C;&#x65B9;&#x4FBF;&#x65B0;&#x9879;&#x76EE;&#x590D;&#x7528;&#xFF0C;&#x8FD9;&#x4E2A;&#x65F6;&#x5019;&#x6211;&#x4EEC;&#x5C31;&#x9700;&#x8981;&#x5F15;&#x5165;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x4ED3;&#x5E93;&#x7684;&#x4E1C;&#x897F;&#xFF0C;&#x73B0;&#x5728;&#x6D41;&#x884C;&#x7684;&#x7EC4;&#x4EF6;&#x5E93;&#x6709;bower&#x3001;component&#x7B49;&#x3002;&#x56E2;&#x961F;&#x53D1;&#x5C55;&#x5230;&#x4E00;&#x5B9A;&#x89C4;&#x6A21;&#x540E;&#xFF0C;&#x7EC4;&#x4EF6;&#x5E93;&#x7684;&#x9700;&#x6C42;&#x4F1A;&#x53D8;&#x5F97;&#x975E;&#x5E38;&#x5F3A;&#x70C8;&#x3002;</p>
<h3 id="t124. &#x6027;&#x80FD;&#x4F18;&#x5316;">4. &#x6027;&#x80FD;&#x4F18;&#x5316; <a href="#t124. &#x6027;&#x80FD;&#x4F18;&#x5316;"> # </a></h3>
<p>&#x8FD9;&#x91CC;&#x7684;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x662F;&#x6307;&#x80FD;&#x591F;&#x901A;&#x8FC7;&#x5DE5;&#x7A0B;&#x624B;&#x6BB5;&#x4FDD;&#x8BC1;&#x7684;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x70B9;&#x3002;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x662F;&#x524D;&#x7AEF;&#x9879;&#x76EE;&#x53D1;&#x5C55;&#x5230;&#x4E00;&#x5B9A;&#x9636;&#x6BB5;&#x5FC5;&#x987B;&#x7ECF;&#x5386;&#x7684;&#x8FC7;&#x7A0B;&#x3002;&#x8FD9;&#x90E8;&#x5206;&#x6211;&#x60F3;&#x5F3A;&#x8C03;&#x7684;&#x4E00;&#x70B9;&#x662F; &#x6027;&#x80FD;&#x4F18;&#x5316;&#x4E00;&#x5B9A;&#x662F;&#x4E00;&#x4E2A;&#x5DE5;&#x7A0B;&#x95EE;&#x9898;&#x548C;&#x7EDF;&#x8BA1;&#x95EE;&#x9898;&#xFF0C;&#x4E0D;&#x80FD;&#x7528;&#x5DE5;&#x7A0B;&#x624B;&#x6BB5;&#x4FDD;&#x8BC1;&#x7684;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x662F;&#x4E0D;&#x9760;&#x8C31;&#x7684;&#xFF0C;&#x4F18;&#x5316;&#x65F6;&#x53EA;&#x8003;&#x8651;&#x4E00;&#x4E2A;&#x9875;&#x9762;&#x7684;&#x9996;&#x6B21;&#x52A0;&#x8F7D;&#xFF0C;&#x4E0D;&#x8003;&#x8651;&#x5168;&#x5C40;&#x5728;&#x5B8F;&#x89C2;&#x7EDF;&#x8BA1;&#x4E0A;&#x7684;&#x4F18;&#x5316;&#x63D0;&#x5347;&#x4E5F;&#x662F;&#x7247;&#x9762;&#x7684;&#x3002;</p>
<h3 id="t135. &#x9879;&#x76EE;&#x90E8;&#x7F72;">5. &#x9879;&#x76EE;&#x90E8;&#x7F72; <a href="#t135. &#x9879;&#x76EE;&#x90E8;&#x7F72;"> # </a></h3>
<p>&#x90E8;&#x7F72;&#x6309;&#x7167;&#x73B0;&#x884C;&#x4E1A;&#x754C;&#x7684;&#x5206;&#x5DE5;&#x6807;&#x51C6;&#xFF0C;&#x867D;&#x7136;&#x4E0D;&#x662F;&#x524D;&#x7AEF;&#x7684;&#x5DE5;&#x4F5C;&#x8303;&#x7574;&#xFF0C;&#x4F46;&#x5B83;&#x5BF9;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x6709;&#x76F4;&#x63A5;&#x7684;&#x5F71;&#x54CD;&#xFF0C;&#x5305;&#x62EC;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x7F13;&#x5B58;&#x3001;cdn&#x3001;&#x975E;&#x8986;&#x76D6;&#x5F0F;&#x53D1;&#x5E03;&#x7B49;&#x95EE;&#x9898;&#x3002;&#x5408;&#x7406;&#x7684;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x8D44;&#x6E90;&#x90E8;&#x7F72;&#x53EF;&#x4EE5;&#x4E3A;&#x524D;&#x7AEF;&#x6027;&#x80FD;&#x5E26;&#x6765;&#x8F83;&#x5927;&#x7684;&#x4F18;&#x5316;&#x7A7A;&#x95F4;&#x3002;</p>
<h3 id="t146. &#x5F00;&#x53D1;&#x6D41;&#x7A0B;">6. &#x5F00;&#x53D1;&#x6D41;&#x7A0B; <a href="#t146. &#x5F00;&#x53D1;&#x6D41;&#x7A0B;"> # </a></h3>
<p>&#x5B8C;&#x6574;&#x7684;&#x5F00;&#x53D1;&#x6D41;&#x7A0B;&#x5305;&#x62EC;&#x672C;&#x5730;&#x5F00;&#x53D1;&#x8C03;&#x8BD5;&#x3001;&#x89C6;&#x89C9;&#x6548;&#x679C;&#x8D70;&#x67E5;&#x786E;&#x8BA4;&#x3001;&#x524D;&#x540E;&#x7AEF;&#x8054;&#x8C03;&#x3001;&#x63D0;&#x6D4B;&#x3001;&#x4E0A;&#x7EBF;&#x7B49;&#x73AF;&#x8282;&#x3002;&#x5BF9;&#x5F00;&#x53D1;&#x6D41;&#x7A0B;&#x7684;&#x6539;&#x5584;&#x53EF;&#x4EE5;&#x5927;&#x5E45;&#x964D;&#x4F4E;&#x5F00;&#x53D1;&#x7684;&#x65F6;&#x95F4;&#x6210;&#x672C;&#xFF0C;&#x800C;&#x4E00;&#x4E9B;&#x72EC;&#x7ACB;&#x7684;&#x4E0A;&#x7EBF;&#x7CFB;&#x7EDF;&#x6BD4;&#x5982;cms&#x7CFB;&#x7EDF;&#x3001;&#x9759;&#x6001;&#x8D44;&#x6E90;&#x63A8;&#x9001;&#x7CFB;&#x7EDF;&#x7B49;&#x5C06;&#x5F00;&#x53D1;&#x6D41;&#x7A0B;&#x5272;&#x88C2;&#x5F00;&#xFF0C;&#x5BF9;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x7684;&#x6548;&#x7387;&#x6709;&#x4E25;&#x91CD;&#x7684;&#x963B;&#x788D;&#x3002;</p>
<h3 id="t157. &#x5F00;&#x53D1;&#x5DE5;&#x5177;">7. &#x5F00;&#x53D1;&#x5DE5;&#x5177; <a href="#t157. &#x5F00;&#x53D1;&#x5DE5;&#x5177;"> # </a></h3>
<p>&#x5F00;&#x53D1;&#x5DE5;&#x5177;&#x662F;&#x6307;&#x5305;&#x62EC;&#x6784;&#x5EFA;&#x4E0E;&#x4F18;&#x5316;&#x5DE5;&#x5177;&#x3001;&#x5F00;&#x53D1;-&#x8C03;&#x8BD5;-&#x90E8;&#x7F72;&#x7B49;&#x6D41;&#x7A0B;&#x5DE5;&#x5177;&#xFF0C;&#x4EE5;&#x53CA;&#x7EC4;&#x4EF6;&#x5E93;&#x83B7;&#x53D6;&#x3001;&#x63D0;&#x4EA4;&#x7B49;&#x76F8;&#x5173;&#x5DE5;&#x5177;&#xFF0C;&#x751A;&#x81F3;&#x8FD0;&#x8425;&#x3001;&#x6587;&#x6863;&#x3001;&#x914D;&#x7F6E;&#x53D1;&#x5E03;&#x7B49;&#x5E73;&#x53F0;&#x5DE5;&#x5177;&#x3002;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x5F62;&#x6210;&#x4E00;&#x4E2A;&#x8FDE;&#x8D2F;&#x53EF;&#x6301;&#x7EED;&#x4F18;&#x5316;&#x7684;&#x5F00;&#x53D1;&#x4F53;&#x7CFB;&#x9700;&#x8981;&#x5DE5;&#x5177;&#x652F;&#x6301;&#xFF0C;&#x5DE5;&#x5177;&#x7684;&#x8BBE;&#x8BA1;&#x81F3;&#x5173;&#x91CD;&#x8981;&#x3002;</p>
<blockquote>
<p>&#x4E00;&#x4E2A;&#x524D;&#x7AEF;&#x56E2;&#x961F;&#x7684;&#x6280;&#x672F;&#x4F53;&#x7CFB;&#x5F62;&#x6210;&#x8FC7;&#x7A0B;&#xFF0C;&#x65E0;&#x5916;&#x4E4E;&#x662F;&#x5728;&#x52AA;&#x529B;&#x62FC;&#x51D1;&#x4E0A;&#x8FF0;&#x7684;&#x5404;&#x9879;&#x6280;&#x672F;&#x5143;&#x7D20;&#x7684;&#x5177;&#x4F53;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#xFF0C;&#x771F;&#x6B63;&#x80FD;&#x591F;&#x63D0;&#x51FA;&#x89E3;&#x51B3;&#x4EE5;&#x4E0A;&#x6240;&#x6709;&#x95EE;&#x9898;&#x7684;&#x65B9;&#x6848;&#x624D;&#x53EF;&#x4EE5;&#x79F0;&#x4E4B;&#x4E3A;&#x96C6;&#x6210;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x3002;FIS&#x548C;JDF&#x505A;&#x5230;&#x4E86;&#xFF0C;&#x5F53;&#x7136;&#x4E5F;&#x6709;&#x5F88;&#x591A;&#x5176;&#x4ED6;&#x56E2;&#x961F;&#x505A;&#x5230;&#x4E86;&#x3002;</p>
</blockquote>
<h2 id="t16FIS3&#x7684;&#x4ECB;&#x7ECD;&#x548C;&#x4F7F;&#x7528;">FIS3&#x7684;&#x4ECB;&#x7ECD;&#x548C;&#x4F7F;&#x7528; <a href="#t16FIS3&#x7684;&#x4ECB;&#x7ECD;&#x548C;&#x4F7F;&#x7528;"> # </a></h2>
<p>FIS3 &#x662F;&#x9762;&#x5411;&#x524D;&#x7AEF;&#x7684;&#x5DE5;&#x7A0B;&#x6784;&#x5EFA;&#x5DE5;&#x5177;&#x3002;&#x89E3;&#x51B3;&#x524D;&#x7AEF;&#x5DE5;&#x7A0B;&#x4E2D;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x3001;&#x8D44;&#x6E90;&#x52A0;&#x8F7D;&#xFF08;&#x5F02;&#x6B65;&#x3001;&#x540C;&#x6B65;&#x3001;&#x6309;&#x9700;&#x3001;&#x9884;&#x52A0;&#x8F7D;&#x3001;&#x4F9D;&#x8D56;&#x7BA1;&#x7406;&#x3001;&#x5408;&#x5E76;&#x3001;&#x5185;&#x5D4C;&#xFF09;&#x3001;&#x6A21;&#x5757;&#x5316;&#x5F00;&#x53D1;&#x3001;&#x81EA;&#x52A8;&#x5316;&#x5DE5;&#x5177;&#x3001;&#x5F00;&#x53D1;&#x89C4;&#x8303;&#x3001;&#x4EE3;&#x7801;&#x90E8;&#x7F72;&#x7B49;&#x95EE;&#x9898;&#x3002;</p>
<p>&#x5B98;&#x7F51;&#xFF1A;<a href="http://fis.baidu.com/fis3/index.html">http://fis.baidu.com/fis3/index.html</a></p>
<p>&#x65B9;&#x6848;&#xFF1A;<a href="http://oak.baidu.com/">http://oak.baidu.com/</a></p>
<p>github&#xFF1A;<a href="https://github.com/fex-team/fis3">https://github.com/fex-team/fis3</a></p>
<p>fis3&#x7684;demo&#x793A;&#x4F8B;&#xFF1A;<a href="https://github.com/fex-team/fis3-demo">https://github.com/fex-team/fis3-demo</a></p>
<h2 id="t17Jello&#x7684;&#x5B9E;&#x8DF5;">Jello&#x7684;&#x5B9E;&#x8DF5; <a href="#t17Jello&#x7684;&#x5B9E;&#x8DF5;"> # </a></h2>
<blockquote>
<p>Jello&#x662F;&#x57FA;&#x4E8E;&#x670D;&#x52A1;&#x7AEF;&#x4E3A;java&#xFF0C;velocity/jsp&#x4E3A;&#x6A21;&#x677F;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x3002;&#x5B66;&#x4E60;&#x5730;&#x5740;&#xFF1A;<a href="http://oak.baidu.com/jello-demo/">http://oak.baidu.com/jello-demo/</a></p>
</blockquote>
<p>&#x6211;&#x7684;&#x5B9E;&#x8DF5;&#x4ECB;&#x7ECD;&#xFF1A;</p>
<ol>
<li>&#x5BF9;&#x6574;&#x7AD9;web&#x5E94;&#x7528;&#x5212;&#x5206;&#x4E1A;&#x52A1;&#x7CFB;&#x7EDF;</li>
<li>&#x9009;&#x62E9;&#x540E;&#x7AEF;jsp&#x6A21;&#x677F;&#x8BED;&#x8A00;&#x5BF9;&#x63A5;spring mvc&#x67B6;&#x6784;</li>
<li>js&#x4EE3;&#x7801;&#x9075;&#x5FAA;commonjs&#x6A21;&#x5757;&#x5316;&#x89C4;&#x8303;</li>
<li>widget&#x7EC4;&#x4EF6;&#x5316;</li>
<li>&#x9009;&#x62E9;less&#x9884;&#x5904;&#x7406;&#x5668;&#x8FDB;&#x884C;css&#x6A21;&#x5757;&#x5316;</li>
<li>&#x6027;&#x80FD;&#x4F18;&#x5316;</li>
<li>shell&#x811A;&#x672C;&#x90E8;&#x7F72;</li>
<li>&#x6A21;&#x62DF;&#x6570;&#x636E;&#xFF0C;&#x524D;&#x540E;&#x7AEF;&#x72EC;&#x7ACB;&#x5F00;&#x53D1;</li>
</ol>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>

</div>


</body>
</html>
